<template>
     <div>
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">部门设置</div>
                    <div class="widget-function am-fr">
                        <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
                    </div>
                </div>
                <div class="widget-body  am-fr">
                    <div>
                        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
                            @change="handleAreaTeamIdChange" v-model="areaTeamId" placeholder="请选择区域" :disabled ='disabled'>
                            <el-option
                                v-for="item in areaTeams"
                                :key="item.areaTeamId"
                                :label="item.name"
                                :value="item.areaTeamId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="am-u-sm-12 department-list">
                        <ul >
                            <li v-for="(item,index) in departmentList" :key= "index">
                                <label class="am-fl">部门{{index+1}} :</label>
                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-fl">
                                    <el-input v-model="item.departmentName" :id ='index' ></el-input>
                                </div>
                                <!-- <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end"> -->
                                    <button  type="button" @click="addDepartmentList" class="btn-search am-btn am-btn-default am-btn-success am-fl" v-if = "index===0">
                                        <span class=""></span>&nbsp;添加
                                    </button>
                                <!-- </div> -->
                                <!-- <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end"> -->
                                    <button  type="button" @click="delDepartmentList(index)" class="btn-search am-btn am-btn-default am-btn-success am-fl" v-if = "index>=1">
                                        <span class=""></span>&nbsp;删除
                                    </button>
                                <!-- </div> -->
                            </li>
                        </ul>
                        <div class="am-u-sm-12 am-u-md-12 save-btn">
                            <button  type="button" @click="saveOrUpdateDepartment" class="btn-search am-btn am-btn-default am-btn-success " >
                            保存
                            </button>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import io from '../../lib/io'
import CustomerToolbar from './CustomerToolbar.vue'
export default{
    components:{
        CustomerToolbar
    },
    data(){
        return{
            formData:[],
            areaTeams:[],
            areaTeamId:'',
            departmentList:[
                {
                    departmentName:'',
                    departmentId:'',
                }
            ],
            disabled:false,
        }
    },
    created(){
        this.queryAreaTeams()
        let areaTeamId = this.$route.query.areaTeamId
        if(areaTeamId){
            this.areaTeamId = areaTeamId
            this.disabled = true
            this.findDepartmentList(areaTeamId)
        }
    },
    methods:{
        handleAreaTeamIdChange(val) {
            console.log(val,this.areaTeamId)
        },
        queryAreaTeams:function () {
            let param ={}
           io.post(io.apiAdminAreaTeamList,param,(data)=>{
                if(data.success){
                    this.areaTeams = data.data.list
                    console.log(data)
                }else{
                   this.$alert(data.desc)
               }
              
           })
        },
        findDepartmentList(areaTeamId){
            let param = {
                areaTeamId:areaTeamId
            }
            io.post(io.findDepartmentList,param,(data)=>{
                if(data.success){
                    if(data.data.length>0){
                        this.departmentList = data.data
                    } 
                }else{
                    this.$alert(data.desc)
                }
            })
        },
        addDepartmentList(){
            let param = {
                departmentName:'',
                departmentId:'',
            }
            this.departmentList.push(param)
        },
        delDepartmentList(idx){
            console.log(idx)
            this.departmentList.splice(idx,1)
        },
        saveOrUpdateDepartment(){
            let department = this.departmentList
            if(this.areaTeamId ===""){
                this.$alert("请选择区域")
                return false
            }
            department.map((item,index)=>{
                if(item.departmentName ===''){
                   this.$alert("请输入部门名称")
                   return false
                }
            })
            let param = {
                areaTeamId:this.areaTeamId,
                departmentJson:JSON.stringify(department)
            }
            io.post(io.saveOrUpdateDepartment,param,(data)=>{
                if(data.success){
                    this.$alert("保存成功")
                    this.$router.push('/main/crm/department')
                }else{
                     this.$alert(data.desc)
                }
               
            })
        },        
    },
    mounted(){
        $(window).smoothScroll()
    },
    computed:{
        
    }
}
</script>
<style lang="less" scoped>
.department-list{
    padding-top:20px;
    text-align:center;
    ul{
        li{
            overflow:hidden;
            .am-btn{
                margin-left:20px;
            }
        }
    }
    
}
.save-btn{
padding-top:20px;
}
</style>